<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>云π</title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script src="js/echarts.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
<style type="text/css">
	body{background:url(img/bg.png) no-repeat top left;background-size:100% 100%;}
</style>

</head>
<body>
	<div id="page" class="page m2">
		<!-- 头部 -->
		<div class="header" style="position: relative;">
			<h1 class="hetitle">CIC交易大厅</h1>
		</div>
		<!--数据表格-->
		<div class="echard">
			<div class="echart">
				<p class="echart1">CIC交易最新价格走势图</p>
				<div class="echarlr">
					<select class="ech_select">
						<option value ="volvo" class="ech_op">Monthly</option>
						<option value ="volvo" class="ech_op">Monthly2</option>
					</select>
				</div>
				
			</div>
			<div class="echar" id="main"></div>
		</div>
		
		<ul class="inlist">
			<li class="inliitem"><a href="javascript:;" class="inlilink">
				<span class="inliitemd">
					<img src="img/inlipic1.png" alt="" class="inlipic" />
					<p class="inlit1">云π钱包总量</p>
				</span>
				<p class="inlit2" id='coutnCIC'>5200.00</p>
			</a></li>
			<li class="inliitem"><a href="javascript:;" class="inlilink">
				<span class="inliitemd">
					<img src="img/inlipic2.png" alt="" class="inlipic" />
					<p class="inlit1">CIC总市值</p>
				</span>
				<p class="inlit2"><span id="countWorth">12313</span><span class="inlit2p">$</span></p>
			</a></li>
			<li class="inliitem"><a href="javascript:;" class="inlilink">
				<span class="inliitemd">
					<img src="img/inlipic3.png" alt="" class="inlipic" />
					<p class="inlit1">当日价格</p>
				</span>
				<p class="inlit2"><span id="price">0.15</span><span class="inlit2p">$</span></p>
			</a></li>
			<li class="inliitem"><a href="javascript:;" class="inlilink">
				<span class="inliitemd">
					<img src="img/inlipic4.png" alt="" class="inlipic" />
					<p class="inlit1">当前交易量</p>
				</span>
				<p class="inlit2">0</p>
			</a></li>
		</ul>
	</div>
	<!-- footer -->
	<div class="footer">
		<div class="footerhr"></div>
		<div class="fonav">
			<a href="index.html" class="foitem on">
				<img src="img/fobg.png" alt="" class="foimg2" />
				<img src="img/foimg1_on.png" alt="" class="foimg" />
				<p class="foititle">市场行情</p>
			</a>
			<a href="munber.html" class="foitem">
				<img src="img/fobg.png" alt="" class="foimg2" />
				<img src="img/foimg2.png" alt="" class="foimg" />
				<p class="foititle">智能挖矿</p>
			</a>
			<a href="my.html" class="foitem">
				<img src="img/fobg.png" alt="" class="foimg2" />
				<img src="img/foimg3.png" alt="" class="foimg" />
				<p class="foititle">个人中心</p>
			</a>
		</div>
	</div>
</body>
<script type="text/javascript">
	$(function(){
		//背景高宽
		$("body").width($(document).outerWidth(true));
		$("body").height($(document).outerHeight(true) - $('.footer').height());
		
		//K线图
	    var myChart = echarts.init(document.getElementById('main'));
	    option = {
	        tooltip: {
	            trigger: 'axis'
	        },
	        calculable: true,
	        xAxis: [{
	                type: 'category',
	                boundaryGap: false,
					//boundaryGap: true,
	                axisTick: {
	                    onGap: false
	                },
	                splitLine: {
	                    show: false
	                },
//	                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
	
	            }],
	
	        yAxis: [{
	                type: 'value',
	                min: 0.1,
	                max: 3.5,
	                scale: true,
	                boundaryGap: [0.01, 0.01],
	                axisLabel: {
	                    show: true //控制y轴的刻标不显示
	                },
	                splitLine: {
	                    show: false //关闭分隔线
	                },
	                axisLine: {
	                    show: true //关闭y轴的显示
	                },
	                axisTick: {
	                    show: false //控制y轴的刻度不显示
	                }
	            }],
	        series: [{
	                name: '价格',
	                type: 'line',
	                smooth: true,
	                itemStyle: {
	                    normal: {
	                        areaStyle: {
	                            type: 'default'
	                        },
	                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#FC6BCA'},
                            {
                                offset: 1,
                                color: '#AE96D0'
                            }]),
                            lineStyle:{
                                color:'#d97adc'  
                            } 
	                    }
	                },
	                symbolSize: 2, //控制焦点不显示，默认是2
	                data:[0.1,0.5,1,0.5,0.8,1.5,1,1.3],
	            },
	        ]
	    };
	    // 为echarts对象加载数据 
	    myChart.setOption(option);
	})
</script>
</html>